<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>网格</title>
    <style>
        body{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: 150px 200px 200px 150px;
        }

        .box1{
            background-color: tomato;
            grid-column-start: 1;
            grid-column-end: -1;
        }
        .box2{
            background-color: #bfa;
            grid-row-start: 2;
            grid-row-end: 4;
        }
        .box3{
            background-color: orange;
            grid-column-start: 2;
            grid-column-end: -1;
        }
        .box4{
            background-color: yellowgreen;
        }
        .box5{
            background-color: yellow;
        }
        .box6{
            background-color: skyblue;
        }
        .box7{
            background-color: silver;
            grid-column-start: 1;
            grid-column-end: -1;
        }
    </style>
</head>
<body>

<div class="box1">网页的头部</div>
<div class="box2">菜单</div>
<div class="box3">上半部分</div>
<div class="box4">图片</div>
<div class="box5">图片</div>
<div class="box6">图片</div>
<div class="box7">底部</div>

</body>
</html>